<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>打卡记录</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/main.css">
	<style>
		.items,
		.img_box {
			margin: 0 5%;
		}

		.items_name {
			margin-top: 3%;
		}

		.img {
			width: 100%;
		}

		.info_times {
			font-size: 14px;
			color: rgb(29, 3, 3);
		}

		.record {
			background-color: #eceaff;
			border: 1px solid #8e84ff;
			margin-bottom: 40px;
		}

		.record>div {
			padding: 2px 0;
		}
	</style>
</head>


<body>
	<div style="height: 45px;"></div>

	<div id="container">
		<div class="contain" id="vue-root">
			<div class="header" style="margin-bottom: 40px;">
				<div class="header_title">今日打卡记录</div>
				<a onclick="history.back()">
					<!-- <img src="image/return.png" class="return"> -->
				</a>
			</div>

			<div class="record" v-for="item in list" :key="item.id">
				<div class="items items_name">
					<span>打卡人:</span>
					<span v-text="item.studentName"></span>
				</div>
				
				<div class="items">
					<span>打卡时间:</span>
					<span v-text="item.time"></span>
				</div>
				<div class="items">
					<span>打卡地点:</span>
					<span v-text="item.schoolName"></span>
				</div>
				<div class="items">
					<img :src="item.pic" class="img">
				</div>
			</div>

			<div class="record" v-for="time in list1">
				<div class="items">
					<span>补签时间:</span>
					<span v-text="time"></span>
				</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/js/common.js"></script>
	<script>

		var app = new Vue({
			el: '#vue-root',
			data: {
				name: null,
				list: [],
				list1: [],
				schoolId: null,
				isTeacher: isTeacher()
			},
			created: function () {
				
				if (!params().date) {
					history.back();
					return;
				}


				this.studentId = params().studentId;
				this.getData();
			},
			methods: {
				getData: function () {
					var url;
					if (this.studentId) {
						url = '/api/attendance2/day/' + this.studentId;
						this.url1 = '/t/punch/day/' + this.studentId;
					} 
					this.getData0(url);
				},
				getImg: function (pic) {
					if (!pic) return null;
					return  pic;
				},
				getData0: function (url) {
					this.date=params().date;
					var params1 = { params: { date: params().date } };//获取后端传的时间
					axios.get(url+"?date="+this.date).then(function (res) {
						this.list = res.data;
					}.bind(this));

					if (this.url1)
						axios.get(this.url1, params1).then(function (res) {
							this.list1 = res.data;
							
						}.bind(this));
				},
				
			}
		});
	 </script>
</body>

</html>